<template>
	<div class="app-container">
		<el-row>
			<el-col :span="6" class="tab-title">
				结构类型设置
			</el-col>
		</el-row>
		<p>设置各省现场调查时在APP端可选择的建筑物结构类型</p>
		<el-form ref="paramsRef" :model="form" :rules="rules" label-width="100px">
			<el-row>
				<el-col :span="6">
					<el-form-item label="省" prop="province">
						<el-select v-model="form.province" placeholder="请选择省" @change="chooseProvince" :disabled="isEdit" clearable>
							<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-button type="primary" @click="saveForm" style="float: right;">保 存</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<table align="center" style="width: 100%;border-collapse: collapse;">
						<tr style="height: 50px;background: var(--el-color-primary-light-9);">
							<td align="center" width="280px">省</td>
							<td align="center" width="280px">结构类型</td>
							<td align="center" width="100px">
								<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
									@change="handleCheckAllChange">全选</el-checkbox>
							</td>
						</tr>
						<tr style="height: 40px;" v-for="(item, index) in StructureTypeList" :key="item">
							<td align="center" rowspan="9" v-if="index == 0">{{ form.province }}</td>
							<td align="center">{{ item.StructureType }}</td>
							<td align="center">
								<el-checkbox v-model="item.checkStatus" :key="item.StructureType"
									@change="handleCheckItemChange(item.checkStatus, item.StructureType)"></el-checkbox>
							</td>
						</tr>
						<!--<tr style="height: 40px;">
							<td align="center">钢结构</td>
							<td align="center">
								<el-checkbox v-model="StructureType" key="高层建筑"></el-checkbox>
							</td>							
						</tr>			
						
						<tr style="height: 40px;">
							<td align="center">多层钢筋混凝土结构</td>
							<td align="center">
								<el-checkbox v-model="StructureType" key="高层建筑"></el-checkbox>
							</td>
							
						</tr>
						<tr style="height: 40px;">
							<td align="center">砖混结构</td>
							<td align="center">
								<el-checkbox v-model="StructureType" key="高层建筑"></el-checkbox>
							</td>							
						</tr>
						<tr style="height: 40px;">
							<td align="center">砖木结构</td>
							<td align="center">
								<el-checkbox v-model="StructureType" key="高层建筑"></el-checkbox>
							</td>							
						</tr>
						<tr style="height: 40px;">
							<td align="center">土结构</td>
							<td align="center">
								<el-checkbox v-model="StructureType" key="高层建筑"></el-checkbox>
							</td>							
						</tr>
						<tr style="height: 40px;">
							<td align="center">木结构</td>
							<td align="center">
								<el-checkbox v-model="StructureType" key="高层建筑"></el-checkbox>
							</td>							
						</tr>
						<tr style="height: 40px;">
							<td align="center">石结构</td>
							<td align="center">
								<el-checkbox v-model="StructureType" key="高层建筑"></el-checkbox>
							</td>							
						</tr>
						<tr style="height: 40px;">
							<td align="center">其他结构</td>
							<td align="center">
								<el-checkbox v-model="StructureType" key="高层建筑"></el-checkbox>
							</td>							
						</tr>-->
					</table>
				</el-col>
			</el-row>

		</el-form>
		<!--<el-row style="margin-top: 30px;">
			<el-col :span="12" :offset="2">
				<el-button type="primary" @click="saveForm">保 存</el-button>
			</el-col>
		</el-row>-->
	</div>
</template>

<script setup name="parameterSettings">
import { getStructureTypeSet, addStructureTypeSet, getProvinceIdByUser } from '@/api/assistPolicy/structureTypeSet'
import { getProvince } from "@/api/system/division";

const { proxy } = getCurrentInstance();
const provinceData = ref([]); //省
const isIndeterminate = ref(false);
const isEdit = ref(false);
const checkAll = ref(true);
const data = reactive({
	form: {
		province: "北京市",
		provinceId: "cd726776c7de41e4a41dcdb3d9012345",
	},
	keyWords: '',
	list: [],
	StructureTypeList: [
		{
			StructureType: "高层建筑",
			checkStatus: true
		},
		{
			StructureType: "钢结构",
			checkStatus: true
		},
		{
			StructureType: "多层钢筋混凝土结构",
			checkStatus: true
		},
		{
			StructureType: "砖混结构",
			checkStatus: true
		},
		{
			StructureType: "砖木结构",
			checkStatus: true
		},
		{
			StructureType: "土结构",
			checkStatus: true
		},
		{
			StructureType: "木结构",
			checkStatus: true
		},
		{
			StructureType: "石结构",
			checkStatus: true
		},
		{
			StructureType: "其他结构",
			checkStatus: true
		},
	],
	currentPage: 1,
	pageSize: 10,
	total: 0
})
const { form, StructureTypeList } = toRefs(data)

onMounted(() => {
	getList()
})

const getList = () => {
	getProvinceIdByUser().then(res => {
		if (res.data != '-1') {
			form.value.provinceId = res.data;
			isEdit.value = true
		}

		getStructureTypeSet(form.value.provinceId).then(res => {
			if (res.data) {
				form.value.provinceId = res.data.id;
				provinceData.value.map(item => { //遍历数据
					if (item.id == res.data.id) {
						form.value.province = item.name
					}
					return
				})
				StructureTypeList.value.map(item => { //遍历数据
					if (res.data.structureType.indexOf(item.StructureType) == -1) {
						item.checkStatus = false
					} else {
						item.checkStatus = true
					}

				})

			}

		})

	})

}

function handleCheckAllChange(val) {
	isIndeterminate.value = false
	if (val) {
		StructureTypeList.value.map(item => { //遍历数据
			item.checkStatus = true;
		})
	} else {
		StructureTypeList.value.map(item => { //遍历数据
			item.checkStatus = false;
		})
	}
}
function handleCheckItemChange(val, type) {
	var count = 0;
	StructureTypeList.value.map(item => { //遍历数据
		if (item.checkStatus == false) {
			count++
		}
	})
	if (count == 9) {
		isIndeterminate.value = false;
		checkAll.value = false
	} else if (count < 9 && count > 0) {
		isIndeterminate.value = true;
	} else if (count == 0) {
		isIndeterminate.value = false;
		checkAll.value = true
	}
}
/** 获取省列表 */
function getProvinceData() {
	getProvince().then((response) => {
		provinceData.value = response.data;
	});
}

function chooseProvince(value) {
	console.log(value.name)
	form.value.province = value.name;
	form.value.provinceId = value.id;
	getList();
}

function saveForm() {
	var stypes = "";
	StructureTypeList.value.map(item => { //遍历数据
		if (item.checkStatus == true) {
			stypes += item.StructureType + ","
		}
	})
	stypes = stypes.substring(0, stypes.length - 1);
	var dataForm = {
		id: form.value.provinceId,
		structureType: stypes
	}

	addStructureTypeSet(dataForm).then(response => {
		proxy.$modal.msgSuccess("保存成功");
		getList();
	});

}
getProvinceData()
</script>

<style scoped lang="scss">
.tab-title {
	font-size: 16px;
	font-weight: bold;
	border-left: 4px solid var(--el-color-primary);
	font-family: PingFangSC-Medium;
	padding-left: 10px;
	margin-bottom: 20px;
}

table td {
	border: 1px solid #c6c6c6;
}</style>